<#include "../common/header.htm">
<div class="content-wrapper">
	<section class="content">
			<div class="bill-right">
				<form id="listForm">
					<div class="box">
						<div class="box-header">
							<div class="row RowSearchWork">
								<div class="col-sm-12">
									<div class="form-group">
										<div class="form-inline">
											<div class="form-group ml10 form_z">
												<label class="control-label">交易日期</label>
												<div class="input-group">
													<div class="input-icon-group">
														<input type="text"
															class="form-control fc-clear form_datetime" id="starTime" />
														<span id="scan" class="glyphicon glyphicon-calendar">
														</span>
													</div>
												</div>
											</div>
											<div class="form-group">
												<label class="control-label hidden-xs"> 至 </label>
												<div class="input-group">
													<div class="input-icon-group">
														<input type="text"
															class="form-control fc-clear form_datetime" id="endTime" />
														<span id="scan" class="glyphicon glyphicon-calendar">
														</span>
													</div>
												</div>
											</div>
											<div class="form-group ml10">
												<label class="control-label">金额</label>
												<input type="text" class="form-control" id="minmoney" name="minmoney" value="" placeholder="" />
											</div>
											<div class="form-group ml10">
												<label class="control-label refsh">至</label>
												<input type="text" class="form-control" id="maxmoney" name="maxmoney" value="" placeholder="" />
											</div>
											<!--<div class="form-group">
												<label class="control-label">交易对手</label>
												<input type="text" class="form-control" id="accountRival" value="" placeholder="" />
											</div>-->
											<div class="form-group ml10">
												<label class="control-label hidden-xs">收付标志</label> <select
													class="form-control" id="sign"
													style="display: inline-block; width: 166px;">
												<option value="-1">全部</option>
												<option value="0">收</option>
												<option value="1">付</option>
											</select>
											</div>
											<div class="form-group ml10">
												<label class="control-label hidden-xs">关键字</label>
												<input type="text" class="form-control" id="keyword" value="" placeholder="交易主体账号/交易主体/交易对手/交易对手卡号/交易地点/备注" />
											</div>
											<div class="form-group bill-buttonarea"
												style="text-align: center;">
												<input type="button" class="btn btn-primary"
													onclick="queryList();" value="分析" /> 
												<input type="button"
													class="btn btn-default" onclick="reset();" value="重置" /> 
												<input type="button" class="btn btn-primary importbtn"
													onclick="exportList();" value="导出" />
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="box-body">
	                        <div class="casemanage-switchtip">
	                            <div class="casemanage-zhexiantu active" title="切换为列表显示">
									<i class="casemanage-switchtip-list"></i><span>列表</span>
	                            </div>
	                            <div class="casemanage-list" onClick="d3show();" title="切换为关系图显示">
									<i class="casemanage-switchtip-d3"></i><span>关系图</span>
	                            </div>
	                        </div>
							<span id="spantitle" class="title"></span>
							<table id="dg"></table>
						</div>
					</div>
				</form>
			</div>
	</section>
</div>
<script type="text/javascript">
	var caseId=parent.caseId;
	$(document).ready(function(){
		$(window).resize(function(){
            $('#dg').datagrid('resize',{
                // height:($(window).height())-150
                height:($(window).height())-($('.box-header').height())-70,
            });
		});
        firstTable();
	})
	$(".form_datetime").datepicker({
	    format: "yyyy-mm-dd",
	    autoclose: true,
	    language:'zh-CN',
	    pickerPosition:"bottom-left"
	});
    $("#listForm").validate({
        rules: {
            minmoney : {
                digits:true
            },
            maxmoney : {
                digits:true
            }
        },
        messages: {
        }
    });
	var checkedAccount;
    var spantitle = $("#spantitle");
    spantitle.html('<span><a style="cursor:pointer;" onclick="queryList()">账单明细</a></span>');
    // window.onload= firstTable;
    function firstTable(){
    	var accountRival = $.trim($("#accountRival").val());
        var accountRivalNumber = $.trim($("#accountRivalNumber").val());
        var accountRivalCard = $.trim($("#accountRivalCard").val());
        var sign = $.trim($("#sign").val());
        var money = $.trim($("#minmoney").val());
        var maxmoney = $.trim($("#maxmoney").val());
        var keyword = $.trim($("#keyword").val());
        var starTime = $.trim($("#starTime").val());
        var endTime = $.trim($("#endTime").val());
        $('#dg').datagrid({
            url:"${ctx}/bill/tj/billDetailList",//请求数据url
			method: 'post',
			queryParams : {
                accountRival : accountRival,
                accountRivalNumber : accountRivalNumber,
                accountRivalCard : accountRivalCard,
                detailKeyword : keyword,
                checkedAccount : parent._checkedAccount.join(','),
                sign : sign,
                casemanageId:caseId,
                minMoney : money,
                maxMoney : maxmoney,
                starTime : starTime,
                endTime : endTime
            },
			height:($(window).height())-($('.box-header').height())-70,
            pagination: true,//允许分页
            rownumbers: true,//行号
            emptyMsg:"暂无信息",//加载数据为空时的信息
            singleSelect: true,//只选择一行
            checkOnSelect: false,
            autoRowHeight : false,//定义是否设置基于该行内容的行高度。设置为 false，则可以提高加载性能。
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            pageSize:30,
            pageList:[30,50,100,150,200],
            //表格的列
            columns: [[
                {
                    field: 'ACCOUNTBODYCARD',//域值
                    // title: '交易主体卡号',//内容
                    title: '交易主体卡号',//内容
                    /*formatter:function (value,row)
					{
                        if (value){
                            return '<a onclick="showAccountBody(\''+value+'\',\''+row.ACCOUNTBODY+'\')" style="cursor:pointer;">'+value+'</a>'
                        }
                    }*/
                },
                {
                    field: 'ACCOUNTBODY',//域值
                    title: '交易主体',//标题
                    sortable: false,//启用排序
                    formatter:function (value,row) {
                        if (row.BODY_TYPE) {
                            return value+'<span class="badge" style="color: white;">'+row.BODY_TYPE +'</span>';
                        }else {
                            return value
                        }
                    }
                },
                {
                    field: 'ACCOUNTRIVAL',//域值
                    title: '交易对手',
                },
                {
                    field: 'ACCOUNTRIVALCARD',//域值
                    title: '交易对手卡号',//内容
                    visible: true,//false表示不显示
                    formatter:function (value,row) {
                        if (value){
                            return '<a onclick="showAccountBody(\''+value+'\',\''+row.ACCOUNTRIVAl+'\')" style="cursor:pointer;">'+value+'</a>'
                        }
                    }
                },
                {
                    field: 'ACCOUNTLOCATION ',//域值
                    title: '归属地',
                },
                {
                    field: 'ACCOUNTBANK',//域值
                    title: '归属银行',
                },
                {
                    field: 'ACCOUNTMONEY',//域值
                    title: '交易总金额',//内容
                    sortable: true,//启用排序
                    formatter:function (value,row,index) {
                        if(!value) return 0;
                        if (Number.isInteger(value)) {
                            return value.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,');
                        } else {
                            return value.toString().replace(/(\d)(?=(\d{3})+\.)/g,'$1,');
                        }
                    }
                },
                {
                    field: 'CREATEID',//域值
                    title: '交易总次数',//内容
                    sortable: true,//启用排序
                    formatter:function (value,row) {
                        return '<a data-toggle="modal" data-target="#myModal" onclick="accountBodyDetail(\''+row.ACCOUNTBODYCARD+'\',\''+row.ACCOUNTRIVALCARD+'\')" style="cursor:pointer;">'+value+'</a>'
                    }
                },
                {
                    field: 'ACCOUNTBALANCE',//域值
                    title: '余额',
                },
                {
                    field: 'ACCOUNTINFLOWALL',//域值
                    title: '净流入',
                },
                {
                    field: 'ACCOUNTINFLOW',//域值
                    title: '流入金额',
                },
                {
                    field: 'ACCOUNTOUT',//域值
                    title: '流出金额',
                },
				{
                    field: 'TRADEDATE',//域值
                    title: '开始时间',//内容
                    sortable: true,//启用排序
                    formatter: function(value, row, index){
                        if(value){
                            var date = new Date(value);
                            return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
                        }else{
                            return '-';
                        }
                    }
                },{
                    field: 'CREATETIME',//域值
                    title: '结束时间',//内容
                    sortable: true,//启用排序
					width:300,
                    formatter: function(value, row, index){
                        if(value){
                            var date = new Date(value);
                            return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
                        }else{
                            return '-';
                        }
                    }
                },
            ]],
            onLoadSuccess: function (data) {
                checkedAccount = null;
            },
            onHeaderContextMenu: function(e, field){
                e.preventDefault();
                if (!cmenu){
                    createColumnMenu();
                }
                cmenu.menu('show', {
                    left:e.pageX,
                    top:e.pageY
                });
            }
        });
	}
    function showAccountBody(bodynumber,body) {
        if (body != 'null' && body != 'undefined'){
            spantitle.append('<span> > <a onclick="showAccountBody(\''+bodynumber+'\',\''+body+'\')" style="cursor:pointer;">'+body+'</a></span>');
        } else {
            spantitle.append('<span> > <a onclick="showAccountBody(\''+bodynumber+'\',\''+body+'\')" style="cursor:pointer;">'+bodynumber+'</a></span>');
        }
        checkedAccount = body+"_"+bodynumber;
        var accountRival = $.trim($("#accountRival").val());
        var accountRivalNumber = $.trim($("#accountRivalNumber").val());
        var accountRivalCard = $.trim($("#accountRivalCard").val());
        var sign = $.trim($("#sign").val());
        var money = $.trim($("#minmoney").val());
        var maxmoney = $.trim($("#maxmoney").val());
        var keyword = $.trim($("#keyword").val());
        var starTime = $.trim($("#starTime").val());
        var endTime = $.trim($("#endTime").val());
        var opt =$('#dg').datagrid('options');
        opt.sortName = "";
        opt.sortOder = "";
        $('#dg').datagrid({
        	method : 'post', // 服务器数据的请求方式 get or post
            url:"${ctx}/bill/tj/billDetailList",//请求数据url
            queryParams:{
                accountRival : accountRival,
                accountRivalNumber : accountRivalNumber,
                accountRivalCard : accountRivalCard,
                detailKeyword : keyword,
                checkedAccount : checkedAccount,
                sign : sign,
                casemanageId:caseId,
                minMoney : money,
                maxMoney : maxmoney,
                starTime : starTime,
                endTime : endTime
            },
			height:($(window).height())-($('.box-header').height())-70,
            pagination: true,//允许分页
            rownumbers: true,//行号
            singleSelect: true,//只选择一行
            emptyMsg:"暂无信息",//加载数据为空时的信息
            pageSize: 20,//每一页数据数量
            checkOnSelect: false,
            autoRowHeight : false,//定义是否设置基于该行内容的行高度。设置为 false，则可以提高加载性能。
            fitColumns: true,//真正的自动展开/收缩列的大小，以适应网格的宽度，防止水平滚动。
            pageList: [20, 50, 100,200],//在设置分页属性的时候初始化页面大小选择列表。
            //表格的列
            columns: [[
                {
                    field: 'ACCOUNTBODY',//域值
                    title: '交易主体',//标题
                    sortable: false,//启用排序
                    formatter:function (value,row) {
                        if (row.BODY_TYPE) {
                            return value+'<span class="badge" style="color: white;">'+row.BODY_TYPE +'</span>';
                        }else {
                            return value
                        }
                    }
                },
                {
                    field: 'ACCOUNTBODYCARD',//域值
                    title: '交易主体卡号',//内容
                    visible: true,//false表示不显示

                },
                {
                    field: 'ACCOUNTRIVAL',//域值
                    title: '交易对手',//内容
                    visible: true,//false表示不显示
                },
                {
                    field: 'ACCOUNTRIVALCARD',//域值
                    title: '交易对手卡号',//内容
                    visible: true,//false表示不显示
                    formatter:function (value,row) {
                        if (value){
                            return '<a onclick="showAccountBody(\''+value+'\',\''+row.ACCOUNTRIVAL+'\')" style="cursor:pointer;">'+value+'</a>'
                        }
                    }
                },
                {
                    field: 'ACCOUNTMONEY',//域值
                    title: '交易总金额',//内容
                    sortable: true,//启用排序
                    visible: true,//false表示不显示
                    formatter:function (value,row,index) {
                        if(!value) return 0;
                        if (Number.isInteger(value)) {
                            return value.toString().replace(/(\d)(?=(\d{3})+$)/g,'$1,');
                        } else {
                            return value.toString().replace(/(\d)(?=(\d{3})+\.)/g,'$1,');
                        }
                    }
                },
                {
                    field: 'CREATEID',//域值
                    title: '交易总次数',//内容
                    sortable: true,//启用排序
                    visible: true,//false表示不显示
                    formatter:function (value,row) {
                        return '<a data-toggle="modal" data-target="#myModal" onclick="accountBodyDetail(\''+row.ACCOUNTBODYCARD+'\',\''+row.ACCOUNTRIVALCARD+'\')" style="cursor:pointer;">'+value+'</a>'
                    }
                },{
                    field: 'TRADEDATE',//域值
                    title: '最早交易时间',//内容
                    sortable: true,//启用排序
                    visible: true,//false表示不显示
                    formatter: function(value, row, index){
                        if(value){
                            var date = new Date(value);
                            return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
                        }else{
                            return '-';
                        }
                    }
                },{
                    field: 'CREATETIME',//域值
                    title: '最晚交易时间',//内容
                    sortable: true,//启用排序
                    visible: true,//false表示不显示
                    formatter: function(value, row, index){
                        if(value){
                            var date = new Date(value);
                            return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
                        }else{
                            return '-';
                        }
                    }
                },
            ]],
            onLoadSuccess: function (result) {
                $("span").click(function(){
                    $(this).nextAll("span").remove();
                });
            },
            onHeaderContextMenu: function(e, field){
                e.preventDefault();
                if (!cmenu){
                    createColumnMenu();
                }
                cmenu.menu('show', {
                    left:e.pageX,
                    top:e.pageY
                });
            }
        });
    }

    function accountBodyDetail(bodynumber,rivalNumber){
        let sign = $.trim($("#sign").val());
        let keyword = $.trim($("#keyword").val());
        let starTime = $.trim($("#starTime").val());
        let endTime = $.trim($("#endTime").val());
        var param = {
            accountBodyCard : bodynumber,
            rivalNumber : rivalNumber,
            sign : sign,
            starTime : starTime,
            endTime : endTime,
            detailKeyword : keyword,
            casemanageId : caseId,
        }
        if(parent._checkedAccount.length>=1000){
            param.cardList="-1";//默认超过1000个节点为全选，不需要去后台传数据
        };
        var d = top.dialog({
            title : '账单明细详情',
            modal : true,
            url : '${ctx}/bill/stream/inaccountStatisticsDialogInit',
            height : 800,
            width : 1500,
            data : param,
            onshow : function () {
            }
        });
        d.show();
        return false;
		}
	    /*列显示下拉框*/
	    var cmenu;
	    function createColumnMenu(){
	        cmenu = $('<div/>').appendTo('body');
	        cmenu.menu({
	            onClick: function(item){
	                if (item.iconCls == 'icon-ok'){
	                    $('#dg').datagrid('hideColumn', item.name);
	                    cmenu.menu('setIcon', {
	                        target: item.target,
	                        iconCls: 'icon-empty'
	                    });
	                } else {
	                    $('#dg').datagrid('showColumn', item.name);
	                    cmenu.menu('setIcon', {
	                        target: item.target,
	                        iconCls: 'icon-ok'
	                    });
	                }
	            }
	        });
	        var fields = $('#dg').datagrid('getColumnFields');
	        for(var i=0; i<fields.length; i++){
	            var field = fields[i];
	            var col = $('#dg').datagrid('getColumnOption', field);
	            cmenu.menu('appendItem', {
	                text: col.title,
	                name: field,
	                iconCls: 'icon-ok'
	            });
	        }
	    };
	 function queryList(){
         spantitle.html('<span><a style="cursor:pointer;" onclick="queryList()">账单明细</a></span>');
         var opt =$('#dg').datagrid('options');
         opt.sortName = "";
         opt.sortOder = "";
         firstTable();
	 }
	 function reset(){
		 $("#accountRival").val('');
		 $("#accountRivalNumber").val('');
		 $("#accountRivalCard").val('');
		 $("#keyword").val('');
		 $("#starTime").val('');
		 $("#endTime").val('');
		 $("#sign").find("option[value='-1']").attr("selected",true);
	 }
	 function exportList(){
	     if (parent._checkedAccount<1) return ;
	     $("#hidebg").show();
		 let accountRival = $.trim($("#accountRival").val());
    	 let accountRivalNumber = $.trim($("#accountRivalNumber").val());
    	 let accountRivalCard = $.trim($("#accountRivalCard").val());
    	 let sign = $.trim($("#sign").val());
         let minMoney = $.trim($("#minmoney").val());
         let maxMoney = $.trim($("#maxmoney").val());
    	 let keyword = $.trim($("#keyword").val());
    	 let starTime = $.trim($("#starTime").val());
    	 let endTime = $.trim($("#endTime").val());
    	 if (checkedAccount){

		 } else {
             checkedAccount = parent._checkedAccount.join(',');
         }
         var data = "accountRival="+accountRival+"&accountRivalNumber="+accountRivalNumber+"&accountRivalCard="+accountRivalCard
             +"&sign="+sign+"&minMoney="+minMoney+"&maxMoney="+maxMoney+"&detailKeyword="+keyword+"&starTime="+starTime+"&endTime="+endTime+"&checkedAccount="+checkedAccount+"&casemanageId="+caseId;
         var XHR=null;
         if (window.XMLHttpRequest) {
             // 非IE内核
             XHR = new XMLHttpRequest();
         } else if (window.ActiveXObject) {
             // IE内核,这里早期IE的版本写法不同,具体可以查询下
             XHR = new ActiveXObject("Microsoft.XMLHTTP");
         } else {
             XHR = null;
         }

         if(XHR){
             XHR.open("POST", "${ctx}/bill/tj/detail/export",true);
             XHR.responseType = "blob";
             XHR.onreadystatechange = function () {
                 if (XHR.readyState == 4 && XHR.status == 200) {
                     var content = this.response;
                     var aTag = document.createElement('a');
                     var blob = new Blob([content]);
                     var headerName = XHR.getResponseHeader("Content-disposition");
                     var fileName = decodeURIComponent(headerName).substring(21);
                     aTag.download = fileName;
                     aTag.href = URL.createObjectURL(blob);
                     aTag.click();
                     URL.revokeObjectURL(blob);
                     $("#hidebg").hide();
                 }

             };
             XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded");
             XHR.send(data);
         }

	 }
	 function _checkedCallback(){
		 queryList();
	 }
     
     function d3show(){
    	 var sign = $.trim($("#sign").val());
         var money = $.trim($("#minmoney").val());
         var maxmoney = $.trim($("#maxmoney").val());
         var keyword = $.trim($("#keyword").val());
         var starTime = $.trim($("#starTime").val());
         var endTime = $.trim($("#endTime").val());
    	 var param = {
                 detailKeyword : keyword,
                 checkedAccount : parent._checkedAccount.join(','),
                 sign : sign,
                 casemanageId:caseId,
                 minMoney : money,
                 maxMoney : maxmoney,
                 starTime : starTime,
                 endTime : endTime
             };
             if(parent.parent._checkedAccount.length>=1000){
                 param.checkedAccount="-1";//默认超过1000个节点为全选，不需要去后台传数据
             };
             var d = top.dialog({
                 title : '账单明细关系图',
                 modal : true,
                 url : '${ctx}/bill/tj/detailD3Init',
                 height : 800,
                 width : 1500,
                 data : param,
                 onshow : function () {
                 }
             });
             d.show();
             return false;
     }
</script>

<style>
	label.control-label.hidden-xs {
		margin-left: -4px;
		margin-right: 0px!important;
	}
	span#spantitle a {
		color: #000;
		font-weight: normal;
	}
	select#sign{
		width: 120px!important;
	}
	input#accountRival,
	input#accountRivalNumber,
	input#accountRivalCard,
	input#minmoney,
	input#maxmoney,
	select#sign,
	input#starTime,
	input#endTime{
		width: 120px;
	}
	input#keyword {
		width: 360px;
	}
#hidebg {
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: #000;
	width: 100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
	height: 100%;
	filter: alpha(opacity = 60); /*设置透明度为60%*/
	opacity: 0.6; /*非IE浏览器下设置透明度为60%*/
	display: none;
	z-Index: 2;
}

.form-group.form_z.ml10 {
	margin-right: 5px;
}

.box {
	padding: 0;
	padding-top: 10px;
}

a {
	color: #337AC6;
}

#hidebg {
	position: absolute;
	left: 0px;
	top: 0px;
	background-color: #000;
	width: 100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
	height: 100%;
	filter: alpha(opacity = 60); /*设置透明度为60%*/
	opacity: 0.6; /*非IE浏览器下设置透明度为60%*/
	display: none;
	z-Index: 9999;
}

span#spantitle {
	font-size: 14px;
	font-weight: 800;
	line-height: 30px;
	top: 15px;
	display: block;
}

input.error {
	border: 1px solid red;
}

label.error {
	background: url("./demo/images/unchecked.gif") no-repeat 0px 0px;
	padding-left: 16px;
	padding-bottom: 2px;
	font-weight: bold;
	color: #EA5200;
}

.box-body {
	margin-bottom: -18px;
	padding: 10px;
	margin-top: 0px;
	position: relative;
    padding-top: 0;
}

.badge {
	background-color: #f7051f;
}

.box-header .row label {
	margin-right: 5px;
	color: #6f7689;
	font-size: 13px;
	font-weight: 400;
}

element.style {
	width: 200px;
}

.bill-buttonarea .btn {
	width: 70px;
	margin-right: 10px;
}
.ml10 {
	margin-left: 0px;
}

.btn-primary:active:focus {
	background-color: #4695ed;
	border-color: #4695ed;
}

.btn-primary {
	background-color: #4695ed;
	border-color: #4695ed;
}

.btn-primary:hover, .btn-primary:active, .btn-primary.hover {
	background: #61a8f5;
	border-color: #61a8f5;
}

.btn-primary.focus, .btn-primary:focus {
	background-color: #4695ed;
	border-color: #4695ed;
}

.form-control {
	border-color: #e4e4e4;
}

.input-group .form-control:first-child {
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

.form-control:focus {
	border-color: #4695ed;
}

.form-control:hover {
	border-color: #4695ed;
}

.fixed-table-pagination {
	margin-top: 15px;
}
</style>